<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="referrer" content="no-referrer" />
      <title>Document</title>
      <style>
            * {
                  margin: 0;
                  padding: 0;
            }

            body,
            html {
                  height: 100%;
                  background-color: #ddd;
            }

            li {
                  list-style-type: none;
            }

            .container {
                  width: 1000px;
                  margin: 0 auto;
            }

            .container ul {
                  width: 1100px;
            }

            .container ul::after {
                  content: "";
                  clear: both;
                  display: block;
            }

            .container ul li {
                  float: left;
                  height: auto;
                  margin: 0 20px 20px 0;
                  border-top: 0 none;
                  background-color: #fff;
                  border-radius: 2px;
                  width: 235px;
            }

            .container ul li img {
                  width: 100%;
            }

            .container ul li p {
                  width: 100%;
                  line-height: 40px;
                  padding-left: 10px;
            }
      </style>
</head>

<body>
      <!-- 瀑布流容器 -->
      <div class="container">
            <!-- 瀑布流定位容器 -->
            <ul class="wrapper">
                  <!-- 每个瀑布流元素 -->
                  <li>
                        <img src="https://c-ssl.duitang.com/uploads/item/202004/21/20200421222241_TvCXF.thumb.400_0.jpeg"
                              alt="">
                        <p>粘土手作希小怪</p>
                  </li>
                  <li>
                        <img src="https://c-ssl.duitang.com/uploads/item/202004/21/20200421222241_TvCXF.thumb.400_0.jpeg"
                              alt="">
                        <p>粘土手作希小怪</p>
                  </li>
                  <li>
                        <img src="https://c-ssl.duitang.com/uploads/item/202004/21/20200421222241_TvCXF.thumb.400_0.jpeg"
                              alt="">
                        <p>粘土手作希小怪</p>
                  </li>
                  <li>
                        <img src="https://c-ssl.duitang.com/uploads/item/202004/21/20200421222241_TvCXF.thumb.400_0.jpeg"
                              alt="">
                        <p>粘土手作希小怪</p>
                  </li>
            </ul>

      </div>


      <script src="./js/jquery.js"></script>
      <script src="./js/jquery.waterfall.js"></script>
      <script>
            $(function () {
                  $.ajax({
                        url: "http://localhost/dt",
                        data: {
                              include_fields: "top_comments,is_root,source_link,item,buyable,root_id,status,like_count,sender,album,reply_count",
                              filter_id: "手工DIY",
                              start: 0,
                              _: Date.now()
                        }
                  })
                        .then(function (res) {
                              render( res.data.object_list );
                              $(".wrapper li").waterFall({
                                    max_col: 4
                              });
                        })
                  function render(list) {
                        // 1. 根据数据拼接字符串;
                        var html = "";
                        for (var i = 0; i < list.length; i++) {
                              // 当前图片的宽度;
                              var n_w = 235;
                              // 图片实际的宽度;
                              var w = list[i].photo.width;
                              // 图片的实际高度;
                              var h = list[i].photo.height;
                              // 当前图片的高度;
                              var n_h = n_w / w * h;

                              html += `<li>
                                          <img src="${list[i].photo.path}" height=${parseInt(n_h)}>
                                          <p>${list[i].msg}</p>
                                    </li>
                              `
                        }
                        // 2. 把字符串放入页面之中;
                        $(".wrapper").html(html);
                  }
            })

      </script>
</body>

</html>